<template>
	<view class="info-box">
		<view class="c-row">
			<view class="c-col-12" >
				<view class="item">
					<text class="text-color-6 item-text1 ">姓名</text>
					<text class="item-text2 text-color-5">{{props.info.user.username}}</text>
				</view>
			</view>
			<view class="c-col-12">
				<view class="item">
					<text class="text-color-6  item-text1">年级</text>
					<text class="item-text2">{{props.info.user.grade}}</text>
				</view>
			</view>

			<view class="c-col-12">
				<view class="item">
					<text class="text-color-6 item-text1">月份</text>
					<text class="item-text2 item-text3">{{props.info.month}}</text>
				</view>
			</view>


			<view class="c-col-12">
				<view class="item">
					<text class="text-color-6 item-text1">状态 </text>
					<text class="item-text2 text-color-3"> {{props.info.state===0?'未通过':'通过'}}</text>
				</view>
			</view>
			<view class="c-col-16">
				<view class="item">
					<text class="text-color-6 item-text1">审核日期</text>
					<text class="item-text2 text-color-3">{{props.info.examine_time}} </text>
				</view>
			</view>
		</view>
		<view class="tab-box">
			<view class="tab-item-heard tab-item-1">
				<text>训练内容</text>
			</view>
			<text class="remask">{{props.info.test_content}}</text>
		</view>
		<view class="tab-box">
			<view class="tab-item-heard tab-item-2">
				<text>教练点评</text>
			</view>
			<text class="remask">{{props.info.teacher_comment}}</text>
		</view>
		<view class="tab-box">
			<view class="tab-item-heard tab-item-3">
				<text>本月数据</text>
			</view>
			<text class="remask">{{props.info.month_data}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const props = defineProps({
		info: {
			type: Object,
			default: () => {
				return []
			}
		},
	})
</script>
 
<style lang="scss" scoped>
	

	.info-box {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 24rpx 40rpx;
		width: 100vw;
	}

	.item {
		display: flex;
		align-items: center;

		.item-text1 {
			font-size: 32rpx;
			line-height: 36rpx;
		}

		.item-text2 {
			font-size: 32rpx;
			line-height: 36rpx;
			margin-left: 30rpx;
		}
	}

	.view {
		margin-bottom: 40rpx;
	}

	.tab-box {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.tab-item-heard {
		display: flex;
		align-items: center;
		width: 100%;
		height: 60rpx;
		opacity: 1;
		border-radius: 8.76px;
		padding: 0 30rpx;
		margin-top: 42rpx;

		text {
			font-size: 32rpx;
			color: #fff;
		}
	}

	.tab-item-1 {
		background: linear-gradient(90deg, rgba(172, 51, 193, 1) 0%, rgba(204, 204, 204, 0) 100%);
	}

	.tab-item-2 {
		background: linear-gradient(90deg, rgba(42, 130, 228, 1) 0%, rgba(204, 204, 204, 0) 100%);
	}

	.tab-item-3 {
		background: linear-gradient(90deg, rgba(0, 186, 173, 1) 0%, rgba(204, 204, 204, 0) 100%);
	}

	.tab-item-4 {
		background: linear-gradient(90deg, rgba(121, 72, 234, 1) 0%, rgba(121, 72, 234, 0) 100%);


	}

	.remask {
		padding: 0 30rpx;
		width: 100%;
		margin-top: 30rpx;
		text-align: justify;
	}

	.item {
		// width: 100%;
		display: flex;
		align-items: center;

		.item-text1 {
			font-size: 30rpx;

		}

		.item-text2 {
			font-size: 30rpx;

		}

		.item-text3 {
			font-size: 26rpx;

			margin-left: 24rpx;
		}
	}
</style>